<template>
  <diy-container
    :status="pageStatus"
    headerBackGroudColor="#ffffff"
    :border-bottom="false"
    ref="container"
    title="会员开通"
    :headerVisable="true"
    :isShowLeft="true"
  >
    <view class="open-member">
      <view class="box">
        <view class="head-box">
          <view class="left">
            <view class="title">VIP会员未开通</view>
            <view class="tips">开通VIP会员可享受尊贵服务哦</view>
          </view>
          <view class="right">
            <img src="../../static/images/member-headVip.png" alt="" />
          </view>
        </view>
        <view class="open-box">
          <view class="title">选择会员类型</view>

          <view class="member-box">
            <view class="member-item" v-for="(item, index) in memberList" :key="index">
              <view class="tips-box">送{{ item.count }}次牵线</view>
              <view class="title">{{ item.title }}</view>
              <view class="price">{{ item.price }}</view>
              <view class="period">有效期：{{ item.date }}天</view>
            </view>
          </view>

          <view class="content">
            <view class="title">会员权限说明</view>
            <view class="content-box">
              一、倔强铂金自救会员权益：
              <br />
              1、身份加VIP标识，赠送红娘一对一牵线5次
              <br />
              2、赠送公众号和朋友圈推荐1次
              <br />
              3、解锁图片视频浏览限制
              <br />
              4、解锁语音介绍收听限制
              <br />
              5、解锁红娘说查看限制
              <br />
              6、搜索结果、匹配结果优先显示
              <br />
              7、在平台首页的VIP板块展示推介
            </view>
          </view>

          <view class="open-btn">
            <button class="btn" type="primary">立即开通</button>
          </view>
        </view>
      </view>
    </view>
  </diy-container>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      memberList: [
        {
          title: "倔强铂金自救会员",
          count: 5,
          price: "299",
          date: 180
        },
        {
          title: "倔强铂金自救会员",
          count: 5,
          price: "299",
          date: 180
        },
        {
          title: "倔强铂金自救会员",
          count: 5,
          price: "299",
          date: 180
        }
      ]
    };
  },
  created() {
    this.showPageContent();
  },
  computed: {},
  methods: {},
  watch: {},

  // 页面周期函数--监听页面加载
  onLoad() {},
  // 页面周期函数--监听页面初次渲染完成
  onReady() {},
  // 页面周期函数--监听页面显示(not-nvue)
  onShow() {},
  // 页面周期函数--监听页面隐藏
  onHide() {},
  // 页面周期函数--监听页面卸载
  onUnload() {}
  // 页面处理函数--监听用户下拉动作
  // onPullDownRefresh() { uni.stopPullDownRefresh(); },
  // 页面处理函数--监听用户上拉触底
  // onReachBottom() {},
  // 页面处理函数--监听页面滚动(not-nvue)
  // onPageScroll(event) {},
  // 页面处理函数--用户点击右上角分享
  // onShareAppMessage(options) {},
};
</script>

<style scoped lang="scss">
.open-member {
  background: linear-gradient(180deg, #c54ce5 10%, #f5f6fa 25%);
  height: calc(100vh - 96rpx);
  padding-top: 180rpx;
  box-sizing: border-box;
  .box {
    background: white;
    z-index: 2;
    border-top-left-radius: 40rpx;
    border-top-right-radius: 40rpx;
    height: 100%;

    .open-box {
      padding: 0 36rpx;
      .content {
        margin-top: 40rpx;
        .title {
          text-align: center;
          font-weight: 700;
          font-size: 26rpx;
        }
        .content-box {
          padding: 30rpx;
          border-radius: 30rpx;
          background: #f4f4f4;
          margin-top: 20rpx;
          font-size: 26rpx;
          line-height: 50rpx;
          color: #6c6c6c;
        }
      }
      .open-btn {
        padding: 20rpx;
        position: fixed;
        z-index: 99;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #fff;
        box-shadow: 0 -10rpx 20rpx rgb(220, 220, 220);
        display: flex;
        align-items: center;
        .btn {
          width: 100%;
          border-radius: 50rpx;
          color: black;
          background: linear-gradient(to right, #e5aafd, #feccfe);
        }
      }
      .member-box {
        display: flex;
        justify-content: space-between;
        margin-top: 40rpx;
        .member-item {
          flex: 1;
          border-radius: 20rpx;
          border: 1px solid #c54ce5;
          padding: 20rpx;
          .period {
            font-size: 24rpx;
            color: #999;
            margin-top: 20rpx;
          }
          .tips-box {
            background-color: rgb(255, 108, 108);
            padding: 5rpx;
            font-size: 24rpx;
            color: white;
            border-radius: 20rpx;
            box-sizing: border-box;
            margin-left: -20rpx;
            text-align: center;
            width: 150rpx;
            height: 40rpx;
            margin-bottom: 20rpx;
          }
          .price {
            margin: 20rpx 0;
            text-align: center;
            font-size: 60rpx;
            font-weight: bold;
          }
        }
        .member-item:nth-child(2) {
          margin: 0 18rpx;
        }
      }
      .title {
        font-weight: bold;
        font-size: 36rpx;
      }
    }

    .head-box {
      display: flex;
      justify-content: space-between;
      transform: translateY(-100rpx);
      background: white;
      padding: 40rpx;
      width: 80%;
      margin: 0 auto;
      box-shadow: 0 5px 20px rgba(96, 97, 110, 0.1);
      border-radius: 40rpx;
      .left {
        .title {
          font-size: 40rpx;
          font-weight: bold;
        }
        .tips {
          margin-top: 30rpx;
          font-size: 28rpx;
          color: rgb(153, 153, 153);
        }
      }
      .right {
        img {
          width: 220rpx;
          height: 140rpx;
        }
      }
    }
  }
}
</style>
